<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
import { mockTable } from '@/mock'

const { data, columns, load } = mockTable(
  ['project', 'pm', 'workTime', 'totalTime', 'ratio', 'startTime'],
  ['项目', '项目经理', '个人总工时', '总工时', '占比', '开始时间'],
)
const { data: data2, columns: columns2, load: load2 } = mockTable(
  ['project', 'pm', 'time'],
  ['项目', '项目经理', '时间'],
)
const { data: data3, columns: columns3, load: load3 } = mockTable(
  ['code', ...Array(31).fill(0).map((_, i) => `d${i}`), 'total'],
  ['工时代码', ...Array(31).fill(0).map((_, i) => `${i + 1}`), '合计'],
)
const { data: data4, columns: columns4, load: load4 } = mockTable(
  ['code', 'name', 'status', 'project', 'money'],
  ['资源编码', '资源名称', '状态', '项目', '金额'],
)
</script>

<template>
  <ElTabs>
    <ElTabPane label="基本信息">
      <div class="info-container">
        <ElForm
          class="left-area"
          :inline="true"
          label-suffix="："
          :label-width="90"
          :disabled="true"
        >
          <ElFormItem label="姓名">
            <ElInput model-value="张三" />
          </ElFormItem>
          <ElFormItem label="性别">
            <ElInput model-value="男" />
          </ElFormItem>
          <ElFormItem label="生日">
            <ElInput model-value="2000-01-01" />
          </ElFormItem>
          <ElFormItem label="入职时间">
            <ElInput model-value="2018-01-01" />
          </ElFormItem>
          <ElFormItem label="所属部门">
            <ElInput model-value="研发中心" />
          </ElFormItem>
          <ElFormItem label="所属岗位">
            <ElInput model-value="开发工程师" />
          </ElFormItem>
        </ElForm>

        <div class="right-area">
          <ElAvatar :size="160">
            <ElIcon :size="120">
              <UserFilled />
            </ElIcon>
          </ElAvatar>
        </div>
      </div>
    </ElTabPane>
    <ElTabPane label="历史项目清单">
      <ElForm :inline="true">
        <ElFormItem label="项目名称">
          <ElInput placeholder="请输入项目名称" />
        </ElFormItem>
        <ElFormItem label="开始时间">
          <ElDatePicker />
        </ElFormItem>
        <ElFormItem label-width="0">
          <ElButton
            type="primary"
            @click="load"
          >
            查询
          </ElButton>
        </ElFormItem>
      </ElForm>
      <ElTable
        :border="true"
        :stripe="true"
        :data="data"
      >
        <ElTableColumn
          v-for="item in columns"
          :key="item.property"
          v-bind="item"
        />
      </ElTable>
    </ElTabPane>
    <ElTabPane label="近期工作预测">
      <ElForm :inline="true">
        <ElFormItem label="项目名称">
          <ElInput placeholder="请输入项目名称" />
        </ElFormItem>
        <ElFormItem label="开始时间">
          <ElDatePicker />
        </ElFormItem>
        <ElFormItem label-width="0">
          <ElButton
            type="primary"
            @click="load2"
          >
            查询
          </ElButton>
        </ElFormItem>
      </ElForm>
      <ElTable
        :border="true"
        :stripe="true"
        :data="data2"
      >
        <ElTableColumn
          v-for="item in columns2"
          :key="item.property"
          v-bind="item"
        />
      </ElTable>
    </ElTabPane>
    <ElTabPane label="工时分析">
      <ElForm :inline="true">
        <ElFormItem label="工时月份">
          <ElDatePicker type="month" />
        </ElFormItem>
        <ElFormItem label-width="0">
          <ElButton
            type="primary"
            @click="load3"
          >
            查询
          </ElButton>
        </ElFormItem>
      </ElForm>
      <ElTable
        :border="true"
        :stripe="true"
        :data="data3"
        :max-height="500"
      >
        <ElTableColumn
          v-for="item in columns3"
          :key="item.property"
          v-bind="item"
        />
      </ElTable>
    </ElTabPane>
    <ElTabPane label="历史虚拟资源记录">
      <ElForm :inline="true">
        <ElFormItem label="状态">
          <ElSelect>
            <ElOption value="doNot">
              正常
            </ElOption>
            <ElOption value="continued">
              续费
            </ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="项目">
          <ElInput placeholder="请输入项目名称" />
        </ElFormItem>
        <ElFormItem label-width="0">
          <ElButton
            type="primary"
            @click="load4"
          >
            查询
          </ElButton>
        </ElFormItem>
      </ElForm>
      <ElTable
        :border="true"
        :stripe="true"
        :data="data4"
        :max-height="500"
      >
        <ElTableColumn
          v-for="item in columns4"
          :key="item.property"
          v-bind="item"
        />
      </ElTable>
    </ElTabPane>
  </ElTabs>
</template>

<style lang="scss" scoped>
.info-container {
  display: flex;
  width: 100%;

  // max-width: 1000px;

  .left-area {
    flex: 2;
  }

  .right-area {
    flex: 1;
    padding-left: 5%;
    border-left: 1px solid #ececec;
  }
}
</style>

<route lang="json5">
{
  "meta": {
    "index": 4,
    "title": "个人页",
  },
}
</route>
